import React, { useEffect, useState } from "react";
import { get } from '@/utils';
import s from './style.module.less';
import {Button, List} from "zarm";
import { useNavigate } from "react-router-dom";
const User = () => {
    const [user, setUser] = useState({});
    const navigateTo = useNavigate();

    useEffect(() => {
        getUserInfo();
    },[])

    const getUserInfo = async () => {
        const { data } = await get('/api/user/getUserInfo');
        setUser(data);
    }

    const logout = () => {
        localStorage.removeItem('token');
        navigateTo('/login');
    }
    return <div className={s.user}>
        <div className={s.head}>
            <div className={s.info}>
                <span>昵称: {user.username || '--'}</span>
                <span>
                    <img style={{ width: 30, height: 30, verticalAlign: '-10px' }} src="//s.yezgea02.com/1615973630132/geqian.png" alt="" />
                    <b>{user.signature || '无个性，不签名'}</b>
                </span>
            </div>
            <img className={s.avatar} src={ user.avatar || ''} />
        </div>
        <div className={s.content}>
            <List>
                <List.Item
                    hasArrow
                    title='用户信息修改'
                    onClick={() => navigateTo('/userinfo')}
                    prefix={<img style={{ width: 20, verticalAlign: '-7px' }} src="//s.yezgea02.com/1615974766264/gxqm.png" alt=""/>}
                />
                <List.Item
                    hasArrow
                    title='重置密码'
                    onClick={() => navigateTo('/account')}
                    prefix={<img style={{ width: 20, verticalAlign: '-7px' }} src="//s.yezgea02.com/1615974766264/zhaq.png" alt="" />}
                />
                <List.Item
                    hasArrow
                    title='关于我们'
                    onClick={() => navigateTo('/about')}
                    prefix={<img style={{ width: 20, verticalAlign: '-7px' }} src="//s.yezgea02.com/1615975178434/lianxi.png" alt="" />}
                />
            </List>
        </div>
        <Button className={s.logout} block theme="danger" onClick={logout}>退出登录</Button>
    </div>
}

export default User